<template>
    <div class="flex-between-items-box page-header mb-14">
        <!-- 标题 -->
        <span class="text-18">{{ title }}</span>
        <!-- 右侧可操作按钮 -->
        <div class="flex-items-box">
            <!-- 自定义内容 -->
            <slot name="custom"/>
            <!-- 筛选条件 -->
            <template v-if="isNeedScreen">
                <el-popover
                    placement="bottom-end"
                    :width="600"
                    trigger="click"
                    :visible="modelValue"
                >
                    <!-- 筛选按钮 -->
                    <template #reference>
                        <el-button
                            type="primary"
                            round
                            @click="$emit('update:modelValue', !modelValue)"
                        >
                            检索条件 <Icon name="ArrowDown" class="ml-4" :size="18"/>
                        </el-button>
                    </template>
                    <!-- 表单插槽 -->
                    <div class="px-10 py-4 items-center flex-between-items-box flex-wrap">
                        <slot/>
                        <!-- 可执行操作 -->
                        <template v-if="!operationIsNewLine">
                            <SearchBox type='right'>
                                <div class="w-full flex-end-box pb-6">
                                    <el-button round @click="$emit('update:modelValue', !modelValue)">取消</el-button>
                                    <el-button round type="primary" @click="$emit('search')">查询</el-button>
                                </div>
                            </SearchBox>
                        </template>
                    </div>
                    <template v-if="operationIsNewLine">
                        <!-- 可执行操作 -->
                        <div class="w-full flex-end-box px-10 pb-6">
                            <el-button round @click="$emit('update:modelValue', !modelValue)">取消</el-button>
                            <el-button
                                round
                                type="primary"
                                @keyup.enter="$emit('search')"
                                @click="$emit('search')"
                            >
                                查询
                            </el-button>
                        </div>
                    </template>
                </el-popover>
            </template>
            <!-- 刷新按钮 -->
            <template v-if="showRefresh">
                <Icon
                    @click="$emit('refresh')"
                    :class="['ml-14 cursor-pointer text-t-secondary', { 'loading-icon' : isRefresh }]"
                    :size="24"
                    name="Refresh"
                />
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import SearchBox from '@/components/SearchBox/index.vue'
import Icon from '@/components/Icon/index.vue'

// 组件参数
const props = defineProps({
    // 标题
    title: {
        type: String,
        default: ''
    },
    // 是否需要筛选条件
    isNeedScreen: {
        type: Boolean,
        default: false
    },
    // 数据是否加载完成
    isDataLoading: {
        type: Boolean,
        default: true
    },
    // 操作按钮是否在新的一行
    operationIsNewLine: {
        type: Boolean,
        default: true
    },
    // 是否需要刷新按钮
    showRefresh: {
        type: Boolean,
        default: true
    },
    // 筛选弹窗状态
    modelValue: {
        type: Boolean,
        default: false
    }
})

/**
 * 组件方法
 * refresh 刷新按钮
 * search 查询按钮
 * */
defineEmits(['refresh', 'search', 'update:modelValue'])

// 是否在刷新
const isRefresh = computed(() => props.isDataLoading)
</script>

<style scoped>
.page-header{
    height: 50px;
}

.loading-icon{
    animation: change 2s linear infinite;
}

@keyframes change {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}
</style>
